<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>MobileFeel SDK Street View Demo</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
<script type="text/javascript">
  
  function angleDifference(angle1, angle2) {
	var diffA = Math.abs(angle1 - angle2);
	var diffB = Math.abs(angle1 + 360 - angle2);
	return Math.min(diffA, diffB);
  }
  
  function step() {
	var heading = panorama.getPov().heading % 360;
	if (heading < 0) heading += 360;
		
	var link = 0;
	var difference = 360;
	for (var i = 0; i < panorama.getLinks().length; i++) {
		var linkDifference = angleDifference(heading, panorama.getLinks()[i].heading);
		if (linkDifference < difference) {
			link = i;
			difference = linkDifference;
		}
	}
	panorama.setPano(panorama.getLinks()[link].pano);
	map.setCenter(panorama.getPosition());
	map.setStreetView(panorama);
	
	polyLine.getPath().push(panorama.getPosition());
	document.getElementById('distance').innerHTML = "<b>Distancia recorrida:</b> " + (Math.round(google.maps.geometry.spherical.computeLength(polyLine.getPath()) * 100) / 100) + "m";
	isStep = true;
  }
  
  function rotateLeft() {
	var pov = panorama.getPov();
	pov.heading -= 5;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  function rotateRight() {
	var pov = panorama.getPov();
	pov.heading += 5;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  function panUp() {
 	var pov = panorama.getPov();
	pov.pitch += 30;
	if (pov.pitch > 90)
		pov.pitch = 90;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  function panDown() {
 	var pov = panorama.getPov();
	pov.pitch -= 30;
	if (pov.pitch < -90)
		pov.pitch = -90;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  function zoomIn() {
 	var pov = panorama.getPov();
	pov.zoom += 1;
	if (pov.zoom > 3)
		pov.zoom = 3;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  function zoomOut() {
	var pov = panorama.getPov();
	pov.zoom -= 1;
	if (pov.zoom < 0)
		pov.zoom = 0;
	panorama.setPov(pov);
	map.setStreetView(panorama);
  }
  
  var panorama;
  var map;
  var polyLine;
  var isStep;
  
  function initialize() {
    var fenway = new google.maps.LatLng(42.345573,-71.098326);
    var mapOptions = {
      center: fenway,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(
        document.getElementById("map_canvas"), mapOptions);
    var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      },
	  panControl: false,
	  scrollwheel: false,
	  zoomControl: false,
	  disableDoubleClickZoom: true,
	  addressControlOptions: {
     	 position: google.maps.ControlPosition.LEFT_TOP
  	  }
    };
    panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
    
    panorama.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("applet"));
    panorama.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById("distance"));
	
	initPolyline();
	polyLine.getPath().push(fenway);
	
	isStep = true;
	google.maps.event.addListener(panorama, 'position_changed', doPositionChanged); 
  }
  
  function doPositionChanged() {
	if (!isStep)
		initPolyline();
	isStep = false;	
  }
  
  function initPolyline() {
	var polyOptions = {
		strokeColor: "#3355FF",
		strokeOpacity: 0.8,
		strokeWeight: 4
	};
	polyLine = new google.maps.Polyline(polyOptions);
	polyLine.setMap(map);
  }
  
</script>
</head>
<body onload="initialize()">
  <div id="applet">
    <applet archive="sv.jar, MobileFeelSDK-Desktop.jar" code="VistaStreetView.class"  WIDTH=500 HEIGHT=35></applet>
  </div>
  <!--<div id="pano" style="position:absolute; left:400px; top: 0px; width: 620px; height: 620px;"></div>
  <div id="map_canvas" style="position:absolute; left:0px; top: 275px; width: 375px; height: 345px"></div>
  <div id="distance" style="position:absolute; left:0px; top: 250px; width: 375px; height: 25px;">Distancia: 0.00m</div>-->
  <div id="map_canvas" style="position:absolute; left:80%; top: 0px; width: 20%; height: 30%; z-index: 1;"></div>
  <div id="pano" style="position:absolute; left:0px; top: 0px; width: 100%; height: 100%; z-index: 0;"></div>
  <div id="distance" style="margin-left: 10px; height: 25px; background-color: #cccccc; padding:3px 10px 0px 10px; "><b>Distancia recorrida:</b> 0.00m</div>
  
</body>
</html>
